<template>
  <div class="honor-edit-container">
    <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
      <el-step title="基本信息"></el-step>
      <el-step title="荣誉图片"></el-step>
      <el-step title="荣誉附件"></el-step>
      <el-step title="荣誉内容"></el-step>
    </el-steps>
    <!-- :inline="true" label-width="80px"  :model="honorModel"   el-form 竟然不需要 model 属性   -->
    <el-form :rules="honorFormRules" :model="honorModel" ref="honorFormRef">
      <el-tabs v-model="activeIndex" tab-position="left" :before-leave="beforeTabLeave">
        <el-tab-pane label="基本信息" name="0">
          <honor-info :form="honorModel" :rules="honorFormRules"></honor-info>
        </el-tab-pane>
        <el-tab-pane label="荣誉图片" name="1">
          <honor-picture
            :model="honorModel"
            :rules="honorFormRules"
            ref="honorPicture"
            @pictureChange="pictureChange"
          ></honor-picture>
        </el-tab-pane>
        <el-tab-pane label="荣誉附件" name="2">
          <honor-attachment
            :model="honorModel"
            :rules="honorFormRules"
            ref="honorAttachment"
            @attachmentChange="attachmentChange"
          ></honor-attachment>
        </el-tab-pane>
        <el-tab-pane label="荣誉内容" name="3">
          <honor-description :model="honorModel" :rules="honorFormRules"></honor-description>
        </el-tab-pane>
      </el-tabs>

      <el-form-item class="save-btn">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getHonor, getHonorPictures, addHonor, updateHonor } from "@/api/archive-honor/honor";
import HonorInfo from './components/honor-info'
import HonorDescription from './components/honor-desc'
import HonorPicture from './components/honor-picture.vue'
import HonorAttachment from './components/honor-attachment.vue'
export default {
  name: 'HonorEdit',
  components: {
    HonorInfo,
    HonorDescription,
    HonorPicture,
    HonorAttachment
  },

  data () {
    return {
      activeIndex: '0',
      honorModel: {},
      pictureLoaded: false, // 如果加载了图片，就不再加载了
      attachmentLoaded: false, // 如果加载了附件，就不再加载了
      honorFormRules: {
        honorName: [
          { required: true, message: '请输入荣誉名称', trigger: 'blur' },
          { min: 2, max: 255, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    pictureChange (pictures) {
      console.log('pictureChange', pictures)
      this.honorModel.pictures = pictures
    },
    attachmentChange (attachments) {
      this.honorModel.attachments = attachments
    },
    handleEdit () {
      return;
    },
    onAddPicture (picture) {
      console.log('添加图片：', picture)
    },
    onDeletePicture (honorPictureId) {
      console.log('删除图片：', honorPictureId)
    },
    onSwapPicture (pictures) {
      console.log('移动图片：', pictures)
    },
    beforeTabLeave (activeName, oldActiveName) {
      // console.log('activeName, oldActiveName', activeName, oldActiveName)
      // console.log('activeName= ', activeName)
      // console.log('pictureLoaded= ', this.pictureLoaded)
      // console.log('attachmentLoaded= ', this.attachmentLoaded)

      if (!this.pictureLoaded && activeName === '1') {
        // console.log('model = ', this.honorModel)
        // console.log('refs=', this.$refs)
        // this.$refs.honorPicture.loadPictures(this.honorModel.honorId)
        this.$refs.honorPicture.loadPictures(this.honorModel)
        this.pictureLoaded = true
        // console.log('加载了图片：', this.honorModel.honorId)
        if (this.honorModel.honorId == 0) {
          addHonor(this.toHonor())
        }
      }

      if (!this.attachmentLoaded && activeName === '2') {
        // console.log('model = ', this.honorModel)
        // console.log('refs=', this.$refs)
        this.$refs.honorAttachment.loadAttachments(this.honorModel)
        this.attachmentLoaded = true
        // console.log('加载了附件：', this.honorModel.honorId)
      }
    },
    async loadHonor (honorId) {
      const { data: honor } = await getHonor(honorId)
      // console.log('honor=:', honor)

      honor.pictureList = []
      this.honorModel = honor;
      if (honor.tags) {
        this.honorModel.tagList = honor.tags.split(',')
      } else {
        this.honorModel.tagList = []
      }

      // const {data: honorPictures} = await getHonorPictures({honorId: honorId})
      // // console.log('honorPictures:', honorPictures)
      // // 这里将 获取图片放到 图片 tabItem 中
      // this.honorModel.pictureList = honorPictures
      // console.log('父组件获取数据成功:', this.honorModel)
    },
    toHonor () {
      let honor = {
        "honorId": this.honorModel.honorId,
        "honorName": this.honorModel.honorName,
        "alternativeName": this.honorModel.alternativeName,
        "honorCode": this.honorModel.honorCode,
        "lookup": this.honorModel.lookup,
        "category": this.honorModel.category,
        "level": this.honorModel.level,
        "label": this.honorModel.label,
        "winner": this.honorModel.winner,
        "department": this.honorModel.department,
        "awardedAt": "2021-11-01",
        "awardedBy": this.honorModel.awardedBy,
        "description": this.honorModel.description,
        "coverId": 1,
        // "tags": "先进",
        // "attachments": this.honorModel.attachments,
        // "pictures": this.honorModel.pictures,
        "status": 0,
        "deleted": 0,
        "displayOrder": this.honorModel.displayOrder,
      };
      honor.tags = this.honorModel.tagList.toString();
      return honor;
    },

    onSubmit () {
      // console.log('mounted') honorFormRef
      console.log('honor edit onSubmit:', this.honorModel)
      let honor = this.toHonor();
      if (this.honorModel.honorId && this.honorModel.honorId > 0) {
        // edit
        // addHonor, updateHonor
        updateHonor(honor).then(response => {
          this.$message.success("更新成功");
          this.$router.push('/honor/honor')
        })
      } else {
        // add
        honor.attachments = this.honorModel.attachments // JSON.stringify()
        honor.pictures = this.honorModel.pictures // JSON.stringify()
        addHonor(honor)
      }
    },
    onCancel () {
      this.$router.push('/honor/honor')
    }
  },
  mounted () {
    // console.log('HonorEdit mounted')
  },
  async created () {
    // console.log('HonorEdit created')
    await this.loadHonor(this.$route.params.honorId)
  }

}
</script>

<style scoped>
.save-btn {
  margin: 20px 105px;
}
</style>